<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./common.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@latest"></script>

</head>

<body>
    <div class="pd12" style="box-sizing: border-box;">
        <div class="top flex_x between pd12">
            <a style="width: 20px;" href="./home.html"><img src="./static/image/left.png" alt=""></a>
            <span style="flex: 1;text-align: center;">BeiJing - Kuala Lumpur </span>
            <div class="f_r flex_x start" style="width: 40px;">
                <img src="./static/image/🦆 icon _bell_.png" alt="">
                <img src="./static/image/🦆 icon _equal 1_.png" alt="">
            </div>
        </div>
        <div class="list"></div>
        <div class="s flex_x between">
            <div class="s_content flex_x between"> <span>Sort by:</span> <img src="./static/image/down.svg" alt="">Price
            </div>
            <img class="s_im" src="./static/image/筛选 1.png" alt="">
        </div>
        <div class="desc">13 flights available location to location</div>
        <div class="f_list">
            <a href="./flightDetail.html">
                <div class="f_item">
                    <div class="f_top flex_x between">
                        <div class="t_left flex_y"><span>BeiJing</span> <span>DaXing T2</span></div>
                        <img src="./static/image/image 1.png" alt="">
                        <div class="t_left flex_y"><span>Kuala Lumpur</span> <span>Kuala LumpurT2 T2</span></div>

                    </div>
                    <div class="f_middle flex_x between mt_20">
                        <div class="m_left flex_y"> <span>Depart</span><span>08:25</span></div>
                        <div class="line"></div>
                        <div class="flights flex_y between">
                            <img src="./static/image/flight.png" alt="">
                            <span>5h 0m</span>
                        </div>
                        <div class="line"></div>
                        <div class="m_right"> <span>08:25</span></div>
                    </div>
                    <div class="f_bottom flex_x between mt_20">
                        <div class="b_left flex_x">
                            <img src="./static/image/b1.png" alt="">
                            <img src="./static/image/d.png" alt="">
                        </div>
                        <img class="like" src="./static/image/Vector.png" alt="">
                        <div class="f_btns">RM45</div>
                    </div>
                </div>
            </a>
            <a href="./flightDetail.html">
                <div class="f_item">
                    <div class="f_top flex_x between">
                        <div class="t_left flex_y"><span>BeiJing</span> <span>DaXing T2</span></div>
                        <img src="./static/image/image 1.png" alt="">
                        <div class="t_left flex_y"><span>Kuala Lumpur</span> <span>Kuala LumpurT2 T2</span></div>

                    </div>
                    <div class="f_middle flex_x between mt_20">
                        <div class="m_left flex_y"> <span>Depart</span><span>08:25</span></div>
                        <div class="line"></div>
                        <div class="flights flex_y between">
                            <img src="./static/image/flight.png" alt="">
                            <span>5h 0m</span>
                        </div>
                        <div class="line"></div>
                        <div class="m_right"> <span>08:25</span></div>
                    </div>
                    <div class="f_bottom flex_x between mt_20">
                        <div class="b_left flex_x">
                            <img src="./static/image/b1.png" alt="">
                            <img src="./static/image/d.png" alt="">
                        </div>
                        <img class="like" src="./static/image/Vector.png" alt="">
                        <div class="f_btns">RM45</div>
                    </div>
                </div>
            </a>
            <a href="./flightDetail.html">
                <div class="f_item">
                    <div class="f_top flex_x between">
                        <div class="t_left flex_y"><span>BeiJing</span> <span>DaXing T2</span></div>
                        <img src="./static/image/image 1.png" alt="">
                        <div class="t_left flex_y"><span>Kuala Lumpur</span> <span>Kuala LumpurT2 T2</span></div>

                    </div>
                    <div class="f_middle flex_x between mt_20">
                        <div class="m_left flex_y"> <span>Depart</span><span>08:25</span></div>
                        <div class="line"></div>
                        <div class="flights flex_y between">
                            <img src="./static/image/flight.png" alt="">
                            <span>5h 0m</span>
                        </div>
                        <div class="line"></div>
                        <div class="m_right"> <span>08:25</span></div>
                    </div>
                    <div class="f_bottom flex_x between mt_20">
                        <div class="b_left flex_x">
                            <img src="./static/image/b1.png" alt="">
                            <img src="./static/image/d.png" alt="">
                        </div>
                        <img class="like" src="./static/image/Vector.png" alt="">
                        <div class="f_btns">RM45</div>
                    </div>
                </div>
            </a>
            <a href="./flightDetail.html">
                <div class="f_item">
                    <div class="f_top flex_x between">
                        <div class="t_left flex_y"><span>BeiJing</span> <span>DaXing T2</span></div>
                        <img src="./static/image/image 1.png" alt="">
                        <div class="t_left flex_y"><span>Kuala Lumpur</span> <span>Kuala LumpurT2 T2</span></div>

                    </div>
                    <div class="f_middle flex_x between mt_20">
                        <div class="m_left flex_y"> <span>Depart</span><span>08:25</span></div>
                        <div class="line"></div>
                        <div class="flights flex_y between">
                            <img src="./static/image/flight.png" alt="">
                            <span>5h 0m</span>
                        </div>
                        <div class="line"></div>
                        <div class="m_right"> <span>08:25</span></div>
                    </div>
                    <div class="f_bottom flex_x between mt_20">
                        <div class="b_left flex_x">
                            <img src="./static/image/b1.png" alt="">
                            <img src="./static/image/d.png" alt="">
                        </div>
                        <img class="like" src="./static/image/Vector.png" alt="">
                        <div class="f_btns">RM45</div>
                    </div>
                </div>
            </a>
        </div>
    </div>

</body>
<script>

    gsap.from(".top  img", {
        duration: .5,
        y: 100,
        x: 100
    });
    let listData = []
    for (var i = 1; i < 31; i++) {
        var jsonObject = {
            date: i
        };
        if (i == 4) {
            jsonObject.isActive = true
        }
        listData.push(jsonObject);
    }
    let list = document.querySelector('.list');
    for (item of listData) {
        let newNode = document.createElement('block');
        newNode.innerHTML = ` 
        ${(function () {
                if (item.isActive) {
                    return `
                                <div class="item active">
                <span class="font_12">Jun</span>
                <span class="font_15">${item.date}</span>
                <span class="font_12">RM45</span>
            </div>`;
                } else {
                    return `
                                <div class="item">
                <span class="font_12">Jun</span>
                <span class="font_15">${item.date}</span>
                <span class="font_12">RM45</span>
            </div>`;
                }
            })()
            }
       `
        list.appendChild(newNode)
    }

</script>
<style>
    .f_r img:nth-child(1) {
        width: 12px;
        height: 14.4px;
        margin-right: 16px;
    }

    .f_r img:nth-child(2) {
        width: 21px;
        height: 12px;
    }

    a {
        color: #000;
    }

    .t_left span:nth-child(1),
    .m_right {
        font-size: 18px;
    }

    .t_left span:nth-child(2) {
        font-size: 10px;
        opacity: 0.5;
    }

    .m_left span:nth-child(1) {
        font-size: 10px;
        opacity: 0.5;
    }

    .m_left span:nth-child(2) {
        font-size: 18px;

    }

    .b_left {
        justify-content: flex-start;
    }

    .b_left img {
        margin-right: 10px;
        width: 19px;
        height: 19.036px;
    }

    .f_middle {
        align-items: center;
    }

    .f_btns {
        width: 62px;
        height: 26px;
        border-radius: 5px;
        background: #FF8906;
        color: #fff;
        text-align: center;
        line-height: 26px;
    }

    .like {
        width: 12px;
        height: 10.019px;
    }

    .f_item .f_top img {
        width: 45.933px;
        height: 45.261px;
        border-radius: 50%;
        margin-left: 53px;
    }

    .flights img {
        width: 20px;
        height: 20.038px;
    }

    .flights span {
        font-size: 10px;
        opacity: 0.5;
    }

    .line {
        width: 67px;
        height: 2px;
        background-color: #999;

        opacity: 0.2;
    }

    .f_item {
        padding: 12px;
        box-sizing: border-box;
        width: 90vw;
        margin: 20px auto;
        border-radius: var(--spacing-2, 8px);
        background: #FFF;
    }

    .f_list {
        margin-top: 20px;
    }

    .desc {
        font-size: 15px;
        margin: 20px auto;
    }

    .s {

        color: #C2C2C2;
        font-size: 15px;
        font-weight: 300;
        margin-top: 20px;
    }

    .s_im {
        width: 25px;
        height: 25px;
    }

    .s_content {
        width: 185px;
        height: 32px;
        line-height: 32px;
        padding: 0 12px;
        box-sizing: border-box;
        border-radius: var(--spacing-2, 8px);
        background: #FFF;
        align-items: center;
    }

    .list .active {
        background: #FFA23C;
        color: #000;
        font-weight: 500;
    }

    .item {
        align-items: center;
        text-align: center;
        display: flex;
        flex-direction: column;
        width: 71px;
        justify-content: space-around;
        height: 95px;
        margin-right: 6px;
        border-radius: 11px;
        border: 2px solid #D9D9D9;
        color: #999;
        font-weight: bold;
    }

    .top img {
        width: 8px;
        height: 11px;
        margin-right: 115px;
    }

    .top {
        font-size: 15px;
        align-items: center;
    }

    .list {
        display: flex;
        /* padding: 10px 0; */

        width: 92vw;
        overflow: scroll;
        white-space: nowrap;
        box-sizing: border-box;
        margin-top: 20px;
    }
</style>

</html>